<template>
	<view>
		<block v-if="isload">
			<form @submit="formsubmit">
				<view class="form-box">
				<view class="form-item">
					<view class="f1">联盟名:<text style="color:red"> *</text></view>
					<view class="f2"><input placeholder="输入名称" name="name" :value="info.name" maxlength="-1" /></view>
				</view>
				<view class="form-item">
					<view class="f1">联盟卡总数:<text style="color:red"> *</text></view>
					<view class="f2"><input placeholder="输入库存" name="sku"  :value="info.sku" maxlength="-1" /></view>
				</view>
				<view class="form-item">
					<view class="f1">每人限购:<text style="color:red"> *</text></view>
					<view class="f2"><input placeholder="输入限购数量" name="limit_num" :value="info.limit_num" maxlength="-1" /></view>
				</view>
				<view class="form-item">
					<view class="f1">售价:<text style="color:red"> *</text></view>
					<view class="f2"><input placeholder="输入售价" name="sell_price" :value="info.sell_price" maxlength="-1" /></view>
				</view>
				<view class="form-item">
					<view class="f1">状态:<text style="color:red"> *</text></view>
					<view class="f2">
						<radio-group class="radio-group" name="status" @change="">
							<view class="radioBox">
								<view class="radioBoxItem">
									<label>
										<radio value="1" :checked="info.status==1?true:false"></radio> 显示
									</label>
								</view>
								<view class="radioBoxItem">
									<label>
										<radio value="0" :checked="!info || info.status==0?true:false"></radio> 隐藏
									</label>
								</view>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="form-item" @click="open" v-if="showcoupon">
					<view class="f1">联盟卷:<text style="color:red"> *</text></view>
					<view class="f2">
						<view class="picker" v-if='cateArr.length<1'>{{'请选择优惠卷'}}</view>
						<view class="picker" v-if='cateArr.length>0'>{{cateArrStr}}</view>
						<!-- <picker @change="cateChange" :value="coupon_id" :range="cateArr"
							style="height:80rpx;line-height:80rpx;border-bottom:1px solid #EEEEEE;font-size:18px">
							<view class="picker">{{cindex==-1? '请选择优惠卷' : cateArr[cindex]}}</view>
						</picker> -->
					</view>
				</view>
				<uni-popup ref="popup" :mask-click="false" type="bottom">
					 <view class="popup-content">  
					        <scroll-view scroll-y="true" style="height: 300px;">  
					          <view v-for="(item, index) in checkOptions" :key="index" class="option" @click="toggleOption(index)">  
					            <checkbox :value="item.checked" :checked="item.checked" @change="checkboxChange(index, $event)"></checkbox>  
					            {{ item.name }}  
					          </view>  
					        </scroll-view>  
					        <button @click="confirmSelection" class="sureCheck">确定</button>  
							<!-- <button @click="close">关闭</button> -->
					      </view>  
				</uni-popup>
				<view class="form-item1">
					<view class="f11">联盟海报:<text style="color:red"> *</text></view>
					<view class="f22">
						<view class="flex" style="flex-wrap:wrap;padding-top:20rpx;">
							<view v-for="(item, index) in pics" :key="index" class="layui-imgbox">
								<view class="layui-imgbox-close" @tap="removeimg" :data-index="index" data-field="pics">
									<image src="/static/img/ico-del.png"></image>
								</view>
								<view class="layui-imgbox-img">
									<image :src="pics" @tap="previewImage" :data-url="pics"
										style="width:200rpx;height:200rpx;background:#eee;" mode="widthFix"></image>
								</view>
							</view>
							<view class="uploadbtn"
								:style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
								@tap="uploadimg" data-field="pics" v-if="pics.length<1">
						
							</view>
						
						</view>
						
						<input type="text" hidden="true" name="pics" :value="pics.join(',')" maxlength="-1"></input>
					</view>
				</view>
				</view>
				<view class="st_button flex-y-center">
					<button form-type="submit" :style="{background:t('color1')}" v-if="this.opt.id">编辑</button>
					<button form-type="submit" :style="{background:t('color1')}" v-if="!this.opt.id">发表</button>
				</view>
			</form>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	import PostRelatedProduct from './components/PostRelatedProduct.vue'
	var app = getApp();

	export default {
		components: {
			PostRelatedProduct
		},

		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				pre_url: app.globalData.pre_url,
				datalist: [],
				content_pic: [],
				pagenum: 1,
				cateArr: [],
				cindex: -1,
				pics: [],
				video: '',
				sysset: {},
				productIds: [],
				products: [],

				info: {},
				checkOptions: [],  
				selectedOptions: [], 
				cateArrStr:'',
				coupon_id:'',
				oldCoupon_id:'',
				showcoupon:false
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		methods: {
			onProductChange(ids) {
				this.productIds = ids
			}, 
			 toggleOption(index) {  
			      this.checkOptions[index].checked = !this.checkOptions[index].checked;  
			    },  
			    checkboxChange(index, event) {  
			      this.checkOptions[index].checked = event.detail.value;  
			    },  
			    confirmSelection() {  
			      this.selectedOptions = this.checkOptions.filter(option => option.checked).map(option => option.name);  
				  this.coupon_id =  this.checkOptions.filter(option => option.checked).map(option => option.id).toString();
				  console.log(this.oldCoupon_id,'===>this.oldCoupon_id')
				  console.log(this.coupon_id,'===>this.coupon_id')
				  var oldCoupon_id = this.oldCoupon_id.split(',')
				 for(let i =0; i< oldCoupon_id.length;i++){
					 if(this.coupon_id.indexOf(oldCoupon_id[i]) == -1){
					 	return	  app.error('不能取消原有的优惠卷')
					 }
					 this.cateArr = this.selectedOptions
					 this.cateArrStr=this.cateArr.toString()
					 this.$refs.popup.close()
				 }
				 
				  
			    },  
			open() {
				
					this.$refs.popup.open('bottom')
					},
			close() {
						this.$refs.popup.close()
					},
			getdata: function() {
				var that = this;
				that.loading = true;
				app.post(
					'ApiAllianceCard/getAllianceCoupons', {
						alliance_id: this.opt.id || '',
						alliance_name:''
					},
					function(res) {
						console.log(res,'===>res111')
						that.checkOptions = res.data
						
						that.loading = false;
						},),
				app.post(
					// 'ApiAdminShortvideo/uploadvideo',
					'ApiAllianceCard/getDataById', {
						id: this.opt.id || '',
					},
					function(res) {
						console.log(res,'===>res')
						that.loading = false;
						if (res.status == -4) {
							app.alert(res.msg);
							return;
						}
						
						if (res.data) {
							that.info = res.data
							that.pics = [res.data.logo]
							that.coupon_id = res.data.coupon_id
							that.oldCoupon_id = res.data.coupon_id
							that.showcoupon = true
						}
						app.post(
							'ApiAllianceCard/getAllianceCoupons', {
								alliance_id: that.opt.id || '',
								alliance_name:''
							},
							function(res) {
								console.log(res,'===>res111')
								that.checkOptions = res.data
								if(that.coupon_id != ''){
									// that.coupon_id ='8'
								that.checkOptions.map(e=>{
										console.log(e,'====>e')
									const coupon_id =	that.coupon_id.split(',')
									for(let i =0 ;i<coupon_id.length;i++){
										if(coupon_id[i] == e.id){
											e.checked = true
											that.selectedOptions = that.checkOptions.filter(option => option.checked).map(option => option.name); 
											 that.cateArr = that.selectedOptions
											 that.cateArrStr=that.cateArr.toString()
										}
									}
									console.log(coupon_id,'==>coupon_id')
									})
								}
								console.log(that.coupon_id ,'=>that.coupon_id ')
								console.log(that.checkOptions ,'=>that.checkOptions ')
								},),
								
								
								
						that.loaded();
					});
			},
			cateChange: function(e) {
				this.cindex = e.detail.value;
			},
			formsubmit: function(e) {
				var that = this;
				console.log(e);
				var clist = that.clist;
				var formdata = e.detail.value;
				
				console.log(formdata,'==>formdata')
				var name = formdata.name;
				var sku = formdata.sku;
				var status = formdata.status;
				var sell_price = formdata.sell_price;
				var limit_num = formdata.limit_num;
				var coupon_id = that.coupon_id;
				if (name == '') {
					app.error('请输入昵称');
					return false;
				}
				if (sku == '') {
					app.error('请输入库存');
					return false;
				}
				if (sell_price == '') {
					app.error('请输入售价');
					return false;
				}
				if (limit_num == '') {
					app.error('请输入限购数量');
					return false;
				}
				if (status == '') {
					app.error('请选择显示状态');
					return false;
				}
				var logo = formdata.pics;
				if (logo == '') {
					app.error('请上传LOGO');
					return false;
				}
				console.log(this.opt,'===>this.opt')
				if(this.opt.id){
					app.post(
						// 'ApiAdminIndex/uploadvideo',
						'ApiAllianceCard/allianceUpdate', {
							id:this.opt.id,
							name:name,
							coupon_id:coupon_id || '',
							sku:sku,
							limit_num:limit_num,
							sell_price:sell_price,
							status:status,
							logo: logo,
						},
						function(res) {
							app.showLoading(false);
							if (res.status == 1) {
								app.success(res.msg);
								setTimeout(function() {
									app.goback(true);
								}, 1000);
							} else {
								app.error(res.msg);
							}
						});
				}else{
					app.post(
						// 'ApiAdminIndex/uploadvideo',
						'ApiAllianceCard/allianceCreate', {
							name:name,
							coupon_id:coupon_id || '',
							sku:sku,
							limit_num:limit_num,
							sell_price:sell_price,
							status:status,
							logo: logo,
						},
						function(res) {
							app.showLoading(false);
							if (res.status == 1) {
								app.success(res.msg);
								setTimeout(function() {
									app.goback(true);
								}, 1000);
							} else {
								app.error(res.msg);
							}
						});
				}
				
			},
			uploadimg: function(e) {
				var that = this;
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				if (!pics) pics = [];
				app.chooseImage(function(urls) {
					for (var i = 0; i < urls.length; i++) {
						pics.push(urls[i]);
					}
					if (field == 'pic') that.pic = pics;
					if (field == 'pics') that.pics = pics;
					if (field == 'zhengming') that.zhengming = pics;
				}, 1)
			},
			removeimg: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				pics.splice(index, 1)
			},
		}
	};
</script>
<style>
	page {
		background: #f7f7f7
	}

	.st_box {
		padding: 0rpx 0
	}

	.st_button {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 24rpx 10rpx 24rpx;
	}

	.st_button button {
		background: #1658c6;
		border-radius: 6rpx;
		border: none;
		padding: 0 20rpx;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		width: 100%;
		display: flex;
		height: 100rpx;
		justify-content: center;
		align-items: center;
	}
	.form-box{ padding:2rpx 24rpx 20rpx 24rpx; background: #fff;margin: 24rpx;border-radius: 10rpx}
	.form-item{ line-height: 100rpx; display: flex;justify-content: space-between;border-bottom:1px solid #eee }
	.form-item .f1{color:#222;width:200rpx;flex-shrink:0}
	.form-item .f2{display:flex;align-items:center}
	.form-item .f2>input{
		text-align: right !important;
	}
	
	.radioBox{
		display: flex;
	}
	.radioBoxItem{
		margin-left: 20rpx;
	}
	.f11{
		margin: 10rpx 0;
	}
	
	.st_form {
		padding: 24rpx;
		background: #ffffff;
		margin: 10px;
		border-radius: 15px;
	}

	.st_form input {
		width: 100%;
		height: 120rpx;
		border: none;
		border-bottom: 1px solid #EEEEEE;
	}

	.st_form input::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #BBBBBB;
		font-size: 24rpx
	}

	.st_form textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx 0;
		border: none;
		border-bottom: 1px solid #EEEEEE;
	}

	.layui-imgbox {
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative;
	}

	.layui-imgbox-img {
		display: block;
		width: 200rpx;
		height: 200rpx;
		padding: 2px;
		border: #d3d3d3 1px solid;
		background-color: #f6f6f6;
		overflow: hidden
	}

	.layui-imgbox-img>image {
		max-width: 100%;
	}

	.layui-imgbox-repeat {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		line-height: 28rpx;
		right: 2px;
		bottom: 2px;
		color: #999;
		font-size: 30rpx;
		background: #fff
	}

	.uploadbtn {
		position: relative;
		height: 200rpx;
		width: 200rpx
	}

	.uploadbtn_ziti1 {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.uploadbtn_ziti2 {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		padding-top: 20rpx;
		margin-top: 20rpx;
		border-top: 1px solid #EEEEEE;
	}
	
	
	.popup-content {  
	  /* 弹窗内容样式 */  
	  width: 100vw;
	  background-color: #fff;
	  overflow-y: auto;
	}  
	  
	.option {  
	  /* 每个选项的样式 */  
	 
	  display: flex;  
	  align-items: center;  
	  padding: 10px;  
	  border-bottom: 1px solid #ddd;  
	}  
	
	.dialog-content {
	   /* 设置你的弹窗内容样式 */  
	   background: #fff;
	   border-radius: 10rpx;
	   padding: 20rpx;
	   
	 }  
	   
	 .dialog-header {  
	   /* 设置你的标题样式 */  
	  background: #fff;
	  padding: 20rpx;
	  height: 100rpx;
	  
	 }  
	  
	.dialog-title {  
	  /* 设置你的标题文字样式 */  
	  
	}   
	  
	.dialog-mask {  
	  position: absolute;  
	  top: 0;  
	  left: 0;  
	  width: 100%;  
	  height: 100%;  
	   /* 遮罩层颜色 */
	  /* background-color: rgba(0, 0, 0, 0.5); */
	 
	} 
	
	.picker{
		    width: 200px;
		    overflow: hidden;
		    white-space: nowrap;
			text-align: right;
	}
	.sureCheck{
		background-color: #288aec;
		color: #fff;
		border-top: 1rpx solid #666666;
		padding: 10rpx 0;
	}
	  
</style>